<template>
  <div>
    <div id="container"></div>
    <div class="tools">
        <a-button type="primary" @click="startAnimation()">开始动画</a-button>
        <a-button type="primary" @click="pauseAnimation()">暂停动画</a-button>
        <a-button type="primary" @click="resumeAnimation()">继续动画</a-button>
        <a-button type="primary" @click="stopAnimation()">停止动画</a-button>
        <a-button type="primary" @click="toggle()">实时路况</a-button>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
    data() {
        return {
            map: null,
            marker: null,
            trafficLayer: null,
            isVisible: false,
            lineArr: [
                [113.401072, 22.511536],
                [113.401662, 22.511497],
                [113.402321, 22.511541],
                [113.402944, 22.511695],
                [113.403866, 22.511958],
                [113.405315, 22.512369],
                [113.407144, 22.51287],
                [113.40885, 22.513335],
                [113.411876, 22.514173],
                [113.414075, 22.514792],
                [113.415759, 22.515263],
                [113.415684, 22.515491],
                [113.414799, 22.515253],
            ]
        }
    },
    mounted() {
        this.initMap()
    },
    beforeDestroy(){
        this.map.destroy()
    },
    methods: {
        initMap() {
            // AMapLoader.reset()
            AMapLoader.load({
                key: "576160dc8363e2361f81fc697028de6d", 
                version: "2.0",
                plugins: ['AMap.MoveAnimation'],    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                // 初始化地图
                this.map = new AMap.Map('container',{
                    pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
                    rotation: -15,
                    viewMode: "3D",  // 是否为3D地图模式
                    zoom: 18,   // 初始化地图级别
                    zooms:[5,20],
                    center: [113.401072, 22.511536], //中心点坐标
                    buildingAnimation: true, //楼块出现是否带动画
                    showLabel: true, //不显示地图文字标记
                    rotateEnable: true,
                    pitchEnable: true,
                    mapStyle: "amap://styles/88955fbba31767a404255bbecac40fe4", //设置地图的显示样式
                });

                this.marker = new AMap.Marker({
                    map: this.map,
                    position: [113.401072, 22.511536],
                    icon: require('@/assets/images/traffic/location.png'),
                    offset: new AMap.Pixel(-22, -22),
                });

                //实时路况图层
                this.trafficLayer = new AMap.TileLayer.Traffic({
                    zIndex: 10,
                    isVisible: false,
                });
                this.trafficLayer.setMap(this.map);
                //初始化实时路况
                this.trafficLayer.hide();
                this.isVisible = false;

                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: this.map,
                    path: this.lineArr,
                    showDir: true,
                    strokeColor: "#4b7d9b", //线颜色
                    strokeWeight: 6, //线宽
                });

                var passedPolyline = new AMap.Polyline({
                    map: this.map,
                    // path: this.lineArr,
                    strokeColor: "#7eff00", //线颜色
                    strokeWeight: 6, //线宽
                });

                this.marker.on("moving", (e) => {
                    passedPolyline.setPath(e.passedPath);
                    this.map.setCenter(e.target.getPosition());
                    this.map.setRotation(-e.target.getOrientation());
                });

                // 自定义点标记内容
                // 点标记显示内容，HTML要素字符串
                var markerContent =
                '<div class="amap_marker">' +
                '<div class="amap_label">交通事故</div>' +
                '<div class="amap_value">4车相撞</div>' +
                "</div>";

                var markerPoint = new AMap.Marker({
                    position: [113.402633, 22.511373],
                    // 将 html 传给 content
                    content: markerContent,
                    offset: new AMap.Pixel(-123, -18),
                });

                // 将 markers 添加到地图
                this.map.add(markerPoint);

                // 添加Canvas图层
                var canvas = document.createElement('canvas');
                canvas.width = canvas.height = 200;

                var context = canvas.getContext('2d')
                context.fillStyle = 'rgb(126,255,0)';
                context.strokeStyle = 'white';
                context.globalAlpha = 1;
                context.lineWidth = 2;

                var radious = 0;
                var draw = function() {
                    context.clearRect(0, 0, 200, 200)
                    context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
                    radious = (radious + 1) % 100;

                    context.beginPath();
                    context.arc(100, 100, radious, 0, 2 * Math.PI);
                    context.fill();
                    context.stroke();

                    // 刷新渲染图层
                    CanvasLayer.reFresh();

                    AMap.Util.requestAnimFrame(draw);
                };

                var CanvasLayer = new AMap.CanvasLayer({
                    canvas: canvas,
                    bounds: new AMap.Bounds(
                        [113.414106,22.515219],[113.415106,22.516219]
                    ),
                    zooms: [3, 20],
                });

                this.map.addLayer(CanvasLayer);
                draw();


            }).catch(e => {
                console.log(e);
            });
        },
        toggle() {
            if (this.isVisible) {
                this.trafficLayer.hide();
                this.isVisible = false;
                console.log('隐藏路况');
            } else {
                this.trafficLayer.show();
                this.isVisible = true;
                console.log('显示路况');
            }
        },
        startAnimation() {
            this.marker.moveAlong(this.lineArr, {
                // 每一段的时长
                duration: 800,
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true,
            });
        },
        pauseAnimation() {
            this.marker.pauseMove();
        },
        resumeAnimation() {
            this.marker.resumeMove();
        },
        stopAnimation() {
            this.marker.stopMove();
        }
    }
}
</script>

<style lang="less" scoped>
#container {
    width: 100%;
    height: 800px;
}

.tools{
    padding: 10px 0;
    text-align: center;

    .ant-btn + .ant-btn {
        margin-left: 10px;
    }
}
</style>

<style lang="less">
/* 隐藏高德logo  */
.amap-logo {
    display: none !important;
}
/* 隐藏高德版权  */
.amap-copyright {
    display: none !important;
}

.amap_marker {
    width: 149px;
    height: 92px;
    background: url(~@/assets/images/traffic/amap_marker_bg.png) no-repeat center;
    position: relative;
}

.amap_label {
    color: #fff;
    font-size: 14px;
    position: absolute;
    left: 10px;
    top: 52px;
}

.amap_value {
    color: #fff82b;
    font-size: 14px;
    position: absolute;
    left: 10px;
    top: 70px;
}
</style>